import React from 'react';

import { connect } from 'dva';

import styles from './game.less';
console.log(styles)
function Game({ game , options , dispatch }){
	const speedOpt = options.speed;
	const { speed , buttons } = game;
	return (
		<div className={styles.warp}>
			<div className={styles.gameplay}>
				<select className={styles.speedOpt} onChange={(e)=>{dispatch({type:'game/speedOpt',payload:+(e.target.value)})}}>
					{
						speedOpt.map((item,key)=>(
							<option value={item} key={key}>
								{transNumberToDescribe(item)}
							</option>))
					}
				</select>
				<span>当前模式游戏：{transNumberToDescribe(speed)}</span>
			</div>
			<div className={styles.gamemachine}>
				{
					buttons.map((item,key)=>(
						<div 
							value={item} 
							key={key}
							className = {`clickWith${key} ${styles.clickWith}`}
							style={{backgroundColor:item}}>
						</div>
						))
				}
				<div className={styles.cover}></div>
			</div>
		</div>
		)
}
function transNumberToDescribe(number){
	switch(number){
		case 800:
		return '高速';
		case 1200:
		return '中速';
		case 1600:
		return '低速';
		default :
		return '未成功设置'
	}
}
function mapStateToProps(state){
	return {
		game : state.game ,
		options : state.game.gameplay
	}
}

export default connect(mapStateToProps)(Game);